<template>
    <div class="mr-prtHcxInfoBox">
      <div>
        <ul>
          <li v-for="(value,index) in boxTmInfo" :key=index>
            <p>缓存箱物料信息</p>
            <p>缓存箱编码：<span style="margin-left:3px">{{value.workbinCode}}</span></p>
            <p>物料条码：<span style="margin-left:3px">{{value.wmsDeliverPlanDTOList[0].barcode}}</span></p>
            <p>图号：<span style="margin-left:3px">{{value.itemCode}}</span></p>
            <p>名称：<span style="margin-left:3px">{{value.mdsItemDTOList[0].itemName}}</span></p>
            <p>数量：<span style="margin-left:3px">{{value.itemQty}}</span></p>
            <p>
              退货数量：
              <span style="fontSize:20px">
                <el-input
                  @blur="blurNum(value.wmsReturnApplyDTOList[0].returnQty,index)"
                  ref="mrprtInput"
                  size="mini"
                  v-model= value.wmsReturnApplyDTOList[0].returnQty
                  placeholder="请输入物料数量"
                  @keyup.enter.native="mrprtEnter"
                ></el-input>
              </span>
            </p>
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
export default {
    name:"MrMathouseBoxinfo",
    data(){
      return{
        // 缓存箱扫码返回的箱子物料信息 
        boxTmInfo:[],
        boxTmInfos:[],
        // mNumber:'',
        num:'',
        maxNum:'',
        indexNum:'',
        // hcx编码
        workbinCode:[],
        // idnex表格勾选信息
        tableCheakInfo:''
      }
    },
    methods:{
      blurNum(num,index){
        console.log(num,index,this.boxTmInfo[0].itemQty)
        // this.boxTmInfos = []
        for(let i=0;i<this.boxTmInfo.length;i++){
          if(index == i){
            this.indexNum = index
            this.num = num
            this.maxNum = this.boxTmInfo[i].itemQty
            // this.boxTmInfo[i].storageQty = num
          }
          // let wwlist = {'wmsReturnApplyId':this.boxTmInfo[i].wmsReturnApplyDTOList[0].wmsReturnApplyId,'billNo':this.boxTmInfo[i].wmsReturnApplyDTOList[0].billNo,'productCode':this.boxTmInfo[i].wmsReturnApplyDTOList[0].productCode,'batchNo':this.boxTmInfo[i].wmsReturnApplyDTOList[0].batchNo,'itemCode':this.boxTmInfo[i].itemCode,'qualityCode':this.boxTmInfo[i].wmsReturnApplyDTOList[0].qualityCode,'returnQty':this.boxTmInfo[i].wmsReturnApplyDTOList[0].returnQty,'returnStatus':this.boxTmInfo[i].wmsReturnApplyDTOList[0].returnStatus,'wmsDeliveryPlanId':this.boxTmInfo[i].wmsDeliveryPlanId,'workbinCode':this.workbinCode}
          // this.boxTmInfos.push(wwlist)
        }
      },
      // 物料输入框回车事件
      mrprtEnter(){
        this.$bus.$emit('smPrtMatiToBtninput','focus')
      },
    },
    mounted(){
      // 拿到index表格勾选数据的信息
        this.$bus.$on('mrPrtInfoKuang',(e)=>{
          this.tableCheakInfo = e
          // console.log('tt',e)
        })
      // 将物料箱信息传给BoxInfo组件
      this.$bus.$on('mrPrthcBoxInfo',(e)=>{
        if(Number(e[0].wmsReturnApplyDTOList[0].notReturnQty)>=Number(e[0].itemQty)){
          e[0].wmsReturnApplyDTOList[0].returnQty = e[0].itemQty;
        }else{
          e[0].wmsReturnApplyDTOList[0].returnQty = e[0].wmsReturnApplyDTOList[0].notReturnQty; 
        }
        this.boxTmInfo.push(e[0])
        this.boxTmInfos = []
        for(let j=0;j<this.boxTmInfo.length;j++){
          let wwlist = {'wmsReturnApplyId':this.boxTmInfo[j].wmsReturnApplyDTOList[0].wmsReturnApplyId,'billNo':this.tableCheakInfo.billNo,'productCode':this.tableCheakInfo.productCode,'batchNo':this.tableCheakInfo.batchNo,'itemCode':this.boxTmInfo[j].itemCode,'qualityCode':this.boxTmInfo[j].wmsReturnApplyDTOList[0].qualityCode,'returnQty':this.boxTmInfo[j].wmsReturnApplyDTOList[0].returnQty,'returnStatus':this.boxTmInfo[j].wmsReturnApplyDTOList[0].returnStatus,'wmsDeliveryPlanId':this.boxTmInfo[j].wmsDeliveryPlanId,'workbinCode':this.boxTmInfo[j].workbinCode}
          this.boxTmInfos.push(wwlist)
        }
        
        this.$bus.$emit('mrPrWloutInfo',this.boxTmInfos)
        // console.log(e)
      })
      // 接收物料确认扫码的index
      this.$bus.$on('mrPrtMarCheckIndex',(e)=>{
        this.$nextTick(()=>{
          this.$refs.mrprtInput[e].focus()
          // this.$refs.materialStatus[e].style.background = 'red'
          // this.$refs.materialStatus[e].innerHTML = '已确认'
        })
      })
      // 清空hcx框
      this.$bus.$on('smPrtClearHcxInfo',(e)=>{
        this.boxTmInfo = [];
        this.boxTmInfos = [];

      })
    },
    updated(){
      
    },
    watch:{
      'num':{
      immediate:true,
      deep:true,
      handler:function (val) {
        this.$nextTick(()=>{
          // console.log(this.num,this.maxNum,this.boxTmInfo)
          if(this.num*1 >= 0 && this.num*1 <= this.maxNum*1){
            // 将修改的数据返给Btn 物料出库按钮
            this.$bus.$emit('mrPrWloutInfo',this.boxTmInfos)
          }else {
              this.num = this.maxNum
              this.boxTmInfo[this.indexNum].wmsReturnApplyDTOList[0].returnQty = this.maxNum
              this.boxTmInfos[this.indexNum].returnQty = this.maxNum
              this.$Alert({
                title: "错误",
                message: '退货数量输入有误！',
                type: "error",
              });
          }
        })
      }
      }
    }

}
</script>
<style scoped>
.mr-prtHcxInfoBox {
  display: none;
}
.mr-prtHcxInfoBox div ul {
  width: 100%;
}
.mr-prtHcxInfoBox div ul li {
  float: left;
  padding: 0 20px;
  width: 300px;
  height: 240px;
  /* background-color: rgb(200, 244, 244); */
  background: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0px 0px 20px 0px #cccbcb;
  margin-left: 50px;
  margin-top: 20px;
  /* text-align: center; */
  border-radius: 10px;
}
.mr-prtHcxInfoBox div ul li p:nth-child(1) {
  text-align: center;
}
.mr-prtHcxInfoBox div ul li p{
  margin-top: 10px;
}
.el-input {
  width: 180px;
  font-size: 18px;
}
</style>